<template>
  <div class="box">
    <!-- 基础题库 -->
    <div class="wai">
      <el-row>
        <span class="shuoming">说明：目前支持学科和关键字条件筛选</span>
        <el-button @click="gotolink" class="zeng1" type="success"
          ><i class="el-icon-edit" />新增试题</el-button
        >
      </el-row>
      <el-form
        ref="dengmiQueryForm"
        :model="dengmiQueryForm"
        label-width="100px"
        class="demo-ruleForm"
        size="mini"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                v-model="dengmiQueryForm.subjectid"
                placeholder="请选择"
                style="width: 100%"
                @focus="getsubject"
              >
                <el-option
                  v-for="item in subjectlist"
                  :key="item.id"
                  :label="item.subjectName"
                  :value="item.id"
                  @click="getid"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                v-model="dengmiQueryForm.catalog"
                placeholder="请选择"
                style="width: 100%"
                @focus="getcatalogue"
              >
                <el-option
                  v-for="item in catalogarr"
                  :key="item.id"
                  :label="item.directoryName"
                  :value="item.directoryName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                v-model="dengmiQueryForm.tags"
                placeholder="请选择"
                style="width: 100%"
                @focus="gettags"
              >
                <el-option
                  v-for="item in gettagslist"
                  :key="item.id"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="dengmiQueryForm.keyword" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                v-model="dengmiQueryForm.questionType"
                placeholder="请选择"
                style="width: 100%"
                @focus="qstype"
              >
                <el-option
                  v-for="item in qstype"
                  :key="item.id"
                  :label="item.value"
                  :value="item.lable"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                v-model="dengmiQueryForm.difficulty"
                placeholder="请选择"
                style="width: 100%"
                @focus="difficulty"
              >
                <el-option
                  v-for="item in difficulty"
                  :key="item"
                  :label="item.value"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                v-model="dengmiQueryForm.direction"
                placeholder="请选择"
                style="width: 100%"
                @focus="direction"
              >
                <el-option
                  v-for="item in direction"
                  :key="item.id"
                  :label="item.value"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                v-model="dengmiQueryForm.creator"
                placeholder="请选择"
                style="width: 100%"
                @focus="getusers"
              >
                <el-option
                  v-for="item in getusers"
                  :key="item.id"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="dengmiQueryForm.remarks" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="dengmiQueryForm.enterpriseID" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-cascader
                v-model="selectedOptions"
                size="large"
                :options="options"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-row type="flex" justify="end">
              <el-col :span="3" style="margin: 0px 20px 0px 0px">
                <el-form-item>
                  <el-button type="primary" @click="empty">清除</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="10" style="margin: 0px 20px 0px 0px">
                <el-form-item>
                  <el-button type="primary" @click="search">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <el-alert :title="one" type="info" show-icon />
      <el-table :data="tableData" style="width: 100%" height="250">
        <el-table-column fixed prop="number" label="试题编号" width="200" />
        <el-table-column prop="subject" label="学科" width="200" />
        <el-table-column prop="catalog" label="目录" width="200" />
        <el-table-column prop="questionType" label="提醒" width="200" />
        <el-table-column prop="question" label="题干" width="350">
          <template slot-scope="scope">
            <p v-html="scope.row.question"></p>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="120" />
        <el-table-column prop="difficulty" label="难度" width="120" />
        <el-table-column prop="creator" label="录入人" width="120" />
        <el-table-column label="操作" width="300">
          <el-row slot-scope="scope" class="tubiao">
            <el-button
              @click="edit(scope.row.id)"
              icon="el-icon-search"
              circle
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editShiti(scope.row.id)"
            ></el-button>
            <el-button
              @click="handleDelete(scope.row.id)"
              type="success"
              icon="el-icon-delete"
              circle
            ></el-button>
            <el-button
              @click="addchoiceness1(scope.row.id, 1)"
              type="info"
              icon="el-icon-check"
              circle
            ></el-button>
            <el-dialog
              style="width: 100%"
              title="收货地址"
              :visible.sync="dialogFormVisible"
            >
              <div class="tanchuang">
                <el-form :model="form">
                  <el-row :gutter="20">
                    <el-col :span="6"
                      ><div>【题型】：{{ form.questionType }}</div></el-col
                    >
                    <el-col :span="6"
                      ><div class="grid-content bg-purple">
                        【编号】：<span>{{ form.number }}</span>
                      </div></el-col
                    >
                    <el-col :span="6"
                      ><div class="grid-content bg-purple">
                        【难度】：{{ form.difficulty }}
                      </div></el-col
                    >
                    <el-col :span="6"
                      ><div class="grid-content bg-purple">
                        【标签】：{{ form.tags }}
                      </div></el-col
                    >
                  </el-row>
                  <el-row :gutter="20" class="tanchuang1">
                    <el-col :span="6"
                      ><div class="grid-content bg-purple">
                        【学科】：{{ form.subject }}
                      </div></el-col
                    >
                    <el-col :span="6"
                      ><div class="grid-content bg-purple">
                        【目录】：{{ form.catalog }}
                      </div></el-col
                    >
                    <el-col :span="6"
                      ><div class="grid-content bg-purple">
                        【方向】：{{ form.direction }}
                      </div></el-col
                    >
                  </el-row>
                  <div style="margin-top: 20px">
                    <div class="grid-content bg-purple">【题干】：</div>
                    <div
                      v-html="scope.row.question"
                      class="grid-content bg-purple"
                    ></div>
                    <div class="grid-content bg-purple">
                      选项：（以下选中的选项为正确答案）
                    </div>
                    <el-radio
                      style="width: 100%"
                      v-model="form.option"
                    ></el-radio>
                    <el-radio
                      style="width: 100%"
                      v-model="form.option"
                    ></el-radio>
                    <el-radio
                      style="width: 100%"
                      v-model="form.option"
                    ></el-radio>
                    <el-radio
                      style="width: 100%"
                      v-model="form.option"
                    ></el-radio>
                  </div>
                  <div class="grid-content bg-purple tanchuang2">
                    <div class="grid-content bg-purple">
                      【参考答案】：<el-button type="danger"
                        >视频答案预览</el-button
                      >
                    </div>
                  </div>
                  <div class="grid-content bg-purple tanchuang2">
                    <div class="grid-content bg-purple">
                      【答案解析】:{{ form.answerID }}
                    </div>
                  </div>
                  <div class="grid-content bg-purple">
                    <div class="grid-content bg-purple">
                      【题目备注】：{{ form.remarks }}
                    </div>
                  </div>
                </el-form>
              </div>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
              </div>
            </el-dialog>
          </el-row>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          class="ye"
          :total="page.total"
          :current-page="page.page"
          :page-sizes="page.pages"
          :page-size="page.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  getquestion,
  deletequestion,
  getquestionsDetail,
  getcatalogue,
  getsubject,
  addchoiceness,
  gettags,
  getusers,
} from "@/api/question";
import { regionData } from "element-china-area-data";
export default {
  name: "DengmiQuery",
  data() {
    return {
      one: "",
      input: "",
      options: regionData,
      //城市
      selectedOptions: [],
      // 学科列表
      subjectlist: [],
      // 二级目录
      catalogarr: [],
      // 标签目录
      gettagslist: [],
      //什么人
      getuser: [],
      // 试题类型
      qstype: [
        {
          value: "单选",
        },
        {
          value: "多选",
        },
        {
          value: "简答",
        },
      ],
      // 难度
      difficulty: [
        {
          value: "简单",
        },
        {
          value: "一般",
        },
        {
          value: "困难",
        },
      ],
      //方向
      direction: [
        {
          value: "o2o",
        },
        {
          value: "外包服务",
        },
        {
          value: "企业服务",
        },
        {
          value: "互联网金融",
        },
        {
          value: "企业咨询",
        },
        {
          value: "互联网",
        },
        {
          value: "电子商务",
        },
        {
          value: "其他",
        },
      ],
      tableData: [], //承接数组
      dengmiQueryForm: {
        subjectid: "",
        catalog: "",
        tags: "",
        keyword: "",
        questionType: "",
        difficulty: "",
        creator: "",
        direction: "",
        remarks: "",
        enterpriseID: "",
        city: "",
      },
      page: {
        page: 1,
        pagesize: 2,
        total: 0,
        pages: [5, 10, 15],
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        questionType: "",
        number: "",
        difficulty: "",
        tags: "",
        subject: "",
        catalog: "",
        direction: "",
        question: "",
        option: {},
        videoURL: "",
        answerID: "",
        remarks: "",
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getquestion();
  },
  methods: {
    editShiti(id) {
      // console.log(id, "123123123123");
      this.$router.push({
        path: "/question/user",
        query: {
          id,
        },
      });
    },
    getid() {
      console.log(123);
    },
    // 获取二级目录
    async getcatalogue() {
      const res = await getcatalogue(this.dengmiQueryForm.subjectid);
      // console.log(res);
      this.catalogarr = res.items;
    },
    // 获取学科列表
    async getsubject() {
      const res = await getsubject();
      this.subjectlist = res.items;
    },
    // 获取标签
    async gettags() {
      const res = await gettags(this.dengmiQueryForm.subjectid);
      // console.log(res);
      const arr = [];
      res.items.forEach((item) => {
        arr.push(item.tagName);
      });
      this.gettagslist = arr;
      // console.log(this.gettagslist, "1231231231231");
    },
    //录入人
    async getusers() {
      const res = await getusers();
      // console.log(res, "123123123123");
      const arrr = [];
      res.list.forEach((item) => {
        arrr.push(item.username);
      });
      this.getusers = arrr;
    },
    // 试题类型
    async qstype() {
      const res = await qstype();
      this.qstype = res;
    },
    //难度
    async difficulty() {
      const res = await difficulty();
      // console.log(res, "123123123123");
    },
    //方向
    async direction() {
      const res = await direction();
    },
    async nandu() {
      this.tableData.map((item) => {
        if (item.difficulty === "1") {
          item.difficulty = "容易";
        } else if (item.difficulty === "2") {
          item.difficulty = "一般";
        }
        if (item.difficulty === "3") {
          item.difficulty = "困难";
        }
      });
    },
    // 搜索
    search() {
      this.questionsList();
    },
    // 清空搜索表单
    empty() {
      this.dengmiQueryForm = {
        subject: "",
        catalog: "",
        tags: "",
        keyword: "",
        questionType: "",
        difficulty: "",
        creator: "",
        direction: "",
        remarks: "",
        enterpriseID: "",
        city: "",
      };
    },
    // 添加到精选
    async addchoiceness1(id, num) {
      console.log(id, num);
      await addchoiceness(id, num);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async getquestion() {
      const { pages, items } = await getquestion(this.page);
      console.log(pages, "=-=-=-");
      console.log(items, "=-=-=-=-=-=-");
      this.page.total = pages.counts;
      this.page.pagesize = +pages.pagesize;
      this.one = `数据一共${items.counts}条`;
      this.tableData = items;
      this.tableData.map((item) => {
        if (item.difficulty === "1") {
          item.difficulty = "容易";
        } else if (item.difficulty === "2") {
          item.difficulty = "一般";
        }
        if (item.difficulty === "3") {
          item.difficulty = "困难";
        }
        if (item.questionType === "1") {
          item.questionType = "单选";
        } else if (item.questionType === "2") {
          item.questionType = "多选";
        }
        if (item.questionType === "3") {
          item.questionType = "简答";
        }
        item.addDate =
          item.addDate.slice(0, 10) + "  " + item.addDate.slice(11, 19);
      });
    },
    // 切换展示第几页
    handleCurrentChange(num) {
      this.page.page = num;
      this.questionsList();
    },
    // 切换每业展示几条数据
    handleSizeChange(num) {
      // console.log(num)
      this.page.pagesize = num;
      this.questionsList();
    },
    async handleDelete(id) {
      try {
        await this.$confirm("确定要删除");
        await deletequestion(id); //调用删除接口
        this.getquestion(); //重新加载
        this.$message.success("删除成功");
      } catch (error) {}
    },
    async edit(id) {
      this.form = await getquestionsDetail(id);
      this.dialogFormVisible = true;
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    gotolink() {
      this.$router.replace("/question/user");
    },
  },
};
</script>

<style lang="scss" scoped>
.tanchuang2 {
  border-top: 1px solid #000;
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 1px solid #000;
}
.tanchuang1 {
  border-bottom: 1px solid #000;
  padding-bottom: 20px;
}
.tanchuang {
  margin-left: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
}
.box {
  background: #e5e9f2;
  padding-top: 5px;
  padding-bottom: 200px;
}
.ye {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}
.shuoming {
  color: red;
  float: left;
  font-size: 5px;
}
.an1 {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}
.biao {
  display: flex;
}
.zeng1 {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}
.wai {
  background-color: #fff;
  margin-top: 20px;
  padding-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple-light {
  background: #e5e9f2;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
